<template>
    <div class="static">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title" >产品数据统计</h1>
                <span>/ 分析产品数据</span>
            </el-col>
        </el-row>
        <div class="content">
            <el-tabs v-model="staName" type="border-card" @tab-click="change_tab">
                <el-tab-pane name="first" label="产品销量" lazy="ture" >
                    <div >
                        <el-row>
                            <el-col :span="5" style="height: 35px;">
                                <div  class="need">
                                    <el-select  v-model="year1" placeholder="选择年份" @change="changeYear1()">
                                            <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option  v-for="item in options_time"  :key="item.value"  :label="item.label" :value="item.label"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="5" style="height: 35px;">
                                <div  class="">
                                    <el-select  v-model="mon1" placeholder="选择月份" @change="changeMon1()">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option  v-for="item in options_mon"  :key="item.value"  :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="charts"  ref="chart1" v-if="staName === 'first'" v-loading="loading"></div>
                </el-tab-pane>
                <el-tab-pane name="seccond" label="产品库存" lazy>
                    <div style="padding-top: 7px;padding-bottom: 7px">
                        <span v-if="delData.length === 0 && check">货源充足，暂不需要补充</span>
                        <span v-if="delData.length != 0">
                            <span v-for="i in delData" :key="i.id" style="color: firebrick">
                                {{i.name}}，
                            </span><span style="color: firebrick">库存不足100，请及时补充</span>
                        </span>
                    </div>
                    <div class="charts"  ref="chart2" v-if="staName === 'seccond'"> </div>
                </el-tab-pane>
                <el-tab-pane name="third" label="采购数据" lazy>
                    <div>
                        <el-row>
                            <el-col :span="5" style="height: 35px;">
                                <div  class="need">
                                    <el-select  v-model="year3" placeholder="选择年份" @change="changeYear2()">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option  v-for="item in options_time"  :key="item.value"  :label="item.label" :value="item.label"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="5" style="height: 35px;">
                                <div  class="">
                                    <el-select  v-model="mon3" placeholder="选择月份" @change="changeMon2()">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option  v-for="item in options_mon"  :key="item.value"  :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="charts"  ref="chart3" v-if="staName === 'third'"> </div>
                    <div style="margin-top: 10px">
                        <el-row>
                            <el-col :span="8">
                                <el-select v-model="timeValue" placeholder="请选择查看方式" width="100%" @change="change_watch()">
                                    <el-option
                                            v-for="item in options_time2"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="changeValue" placeholder="请选择查看金额or数量" @change="change_x()" width="100%">
                                    <el-option
                                            v-for="item in options3"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="charts"  ref="pur_chart1" v-if="staName === 'third'"> </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    const echarts = require('echarts');
    export default {
        name: "pro_chart",
        data(){
            return{
                loading:true,
                check:false,        // 有用的数据，别删
                staName:'first',
                options_time:[
                    { value:1, label:2020},
                    // { value:3, label:"年度统计"},
                ],
                options_mon:[
                    {value:1, label:'一月'},
                    {value:2, label:'二月'},
                    {value:3, label:'三月'},
                    {value:4, label:'四月'},
                    {value:5, label:'五月'},
                    {value:6, label:'六月'},
                    {value:7, label:'七月'},
                    {value:8, label:'八月'},
                    {value:9, label:'九月'},
                    {value:10, label:'十月'},
                    {value:11, label:'十一月'},
                    {value:12, label:'十二月'},
                ],
                options_time2:[
                    { value:1, label:"月度统计"},
                    { value:2, label:"季度统计"},
                    // { value:3, label:"年度统计"},
                ],
                timeValue:1,
                options3:[{
                    value:1,
                    label:"查看采购商品数量"
                }, {
                    value:2,
                    label:"查看采购商品金额"
                }],
                changeValue:1,
                //第一张图表数据
                fseries:[],
                year1:2020,
                mon1:4,
                //第二张图表数据
                sseries:[],
                delData:[],     //缺货的数据
                //第三张图表数据
                year3:2020,
                mon3:3,
                tseries:[],
                //第四张图表数据
                elegend:[],
                eseries:[],
                timeData:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            }
        },
        methods:{
            //第一张图表
            initCharts1 (){
                let myChart = echarts.init(this.$refs.chart1);
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '产品销量比例图',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: this.fseries.map(item => item.name)
                    },
                    series: {
                        type: 'pie',
                        radius: '75%',
                        data:this.fseries,
                    }
                });
            },
            //第一张图表方法
            finitChart(){
                let sumNum = 0;
                this.fseries = [];
                this.loading = true
                this.axios.get("api/product/findCPRoNum",{params:{"yearTime":this.year1,"monthTime":this.mon1}})
                    .then(v=>{
                        v.data.forEach(da1 => {
                            sumNum = sumNum + da1.sums
                        })
                        v.data.forEach(d=>{
                            let name = '';
                            let map = {};
                            name = d.product_brand+d.ability_name+d.product_name
                            map.name = name;
                            map.value = (d.sums/sumNum).toFixed(2);
                            this.fseries.push(map)
                        });
                        this.initCharts1()
                        this.loading = false
                    }).catch()
            },
            changeYear1(){
                this.finitChart();
            },
            changeMon1(){
                this.finitChart();
            },
            //第二张图表方法
            initCharts2(){
                let myChart = echarts.init(this.$refs.chart2);
                myChart.setOption({
                    title: {
                        text: '库存数量比例图',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: this.sseries.map(item => item.name)
                    },
                    series: {
                        type: 'pie',
                        radius: '55%',
                        data:this.sseries,
                    }
                });
            },
            sinitChart(){
                let sumNum = 0;
                this.sseries = [];
                let i = 0;
                this.axios.get("api/product/all-product",)
                    .then(v=>{
                        this.delData=[];
                        v.data.forEach(da1 => {
                            let name = '';
                            let map = {};
                            let abiName = '';
                            if(da1.wareNum < 101){
                                da1.abilities.forEach(abi => {
                                    abiName = abiName + abi.abilityName;
                                })
                                name = da1.product.productBrand+abiName+da1.product.productName;
                                i = i+1
                                map.id = i;
                                map.name = name;
                                this.delData.push(map);
                            }
                            sumNum = sumNum + da1.wareNum;
                        });
                        v.data.forEach(da => {
                            let name = '';
                            let map = {};
                            let abiName = '';
                            da.abilities.forEach(abi => {
                                abiName = abiName + abi.abilityName;
                            })
                            name = da.product.productBrand+abiName+da.product.productName;
                            map.name = name;
                            map.value = (da.wareNum/sumNum).toFixed(2);
                            this.sseries.push(map)
                        });
                        this.check = true;
                        this.initCharts2();
                    }).catch()
            },
            //第三张图表方法
            initCharts3(){
                let myChart = echarts.init(this.$refs.chart3);
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '产品采购比例图',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: this.tseries.map(item => item.name)
                    },
                    series: {
                        type: 'pie',
                        radius: '65%',
                        data:this.tseries,
                    }
                });
            },
            tinitChart(){
                let sumNum = 0;
                this.tseries = [];
                this.axios.get("api/product/findCaiProNum",{params:{"yearTime":this.year3,"monthTime":this.mon3}})
                    .then(v=>{
                        v.data.forEach(da1 => {
                            sumNum = sumNum + da1.sums
                        })
                        v.data.forEach(d=>{
                            let name = '';
                            let map = {};
                            name = d.product_brand+d.ability_name+d.product_name
                            map.name = name;
                            map.value = (d.sums/sumNum).toFixed(2);
                            this.tseries.push(map)
                        });
                        this.initCharts3()
                    }).catch()
            },
            changeYear2(){
                this.tinitChart();
            },
            changeMon2(){
                window.console.log(this.mon1)
                this.tinitChart();
            },
            //第四张图表
            foinitData(){
                //首先要清空图表里的数据
                let sumNum = 0
                this.elegend = []
                this.eseries = []
                this.data1 = []
                this.axios.get("api/chart/firstChart",{params:{"timeValue":this.timeValue,"yearValue":2020,"changeValue":this.changeValue}})
                    .then(v=>{
                        v.data.forEach(da1 => {
                            sumNum = sumNum + da1.sum
                        })
                        v.data.forEach(da2 => {
                            this.data1.push({
                                name:da2.proCName,
                                value:da2.sum/sumNum
                            })
                        })
                        //画好图
                        v.data.forEach(da3 => {
                            this.elegend.push({
                                name:da3.proCName,
                                icon:'circle'
                            })
                            this.eseries.push({
                                name:da3.proCName,
                                type: 'bar',
                                data:da3.arrData
                            })
                        })
                        this.foinitChart()
                    }).catch()
            },
            foinitChart(){
                let myChart = echarts.init(this.$refs.pur_chart1);
                myChart.setOption({
                    title: {
                        text: '产品采购图',
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    legend: {
                        bottom:10,
                        data:this.elegend
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: this.timeData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series:this.eseries,
                })
            },
            change_watch(){
                if (this.timeValue === 1){
                    this.timeData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }else if(this.timeValue === 2){
                    this.timeData = ['1季度', '2季度', '3季度', '4季度']
                }else if(this.timeValue === 3){
                    this.timeData = ['第一季度', '第二季度', '第三季度', '第四季度']
                }
                this.foinitData();
            },
            //改变selection2调用的方法,push进series
            change_x(){
                this.foinitData();
            },
            change_tab(tab){
                if(tab.name=='first'){
                    this.finitChart();
                }
                if(tab.name=='seccond'){
                    this.sinitChart();
                }
                if(tab.name=='third'){
                    this.tinitChart();
                    this.foinitData();
                }
            },
        },
        created() {
            this.finitChart();//后台获取数据源
            this.tinitChart();
            this.foinitData();
            this.sinitChart();
        }
    }
</script>

<style scoped>
    .nav {margin: 20px;background: #fcfbfd;height:auto!important;min-height: 15px;line-height: 45px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 10px;    border-right: 1px solid #eee;line-height: 45px;}
    .contract_title {display: inline-block;font-weight: unset;margin-left: 20px; }
    .content {margin: 20px;background: #fcfbfd;min-height:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-col span {color: #b4b4bc;margin-left: 8px}
    .charts{
        width: 100%;
        height: 400px;
        border: 1px solid #e4e7ee;
        margin-top: 10px;
    }
    .statable{
        margin-left: 20px;
        min-height: 300px;
    }
    .salestatic{
        font-size: large;
        font-weight: bolder;
        color: black;
    }
</style>